﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage2slide.master" AutoEventWireup="true" CodeFile="movie.aspx.cs" Inherits="movie" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    <script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript">
    $(function () {
        // Tabs
      
        $('#tabs').tabs();
       



    });
</script>




<style type="text/css">
/*====================*/
/*=== Body Styles ===*/
/*====================*/
#content{
width:960px;
height:890px;
border:solid 1px #9a7bf3;
margin-left:160px;
background-color:#fff;
}
#tabs{
width:700px;
height:830px;
border-right:solid 1px #9a7bf3;
padding:0 0 0 0;
}
#lcontent{
width:700px;
height:830px;
border-right:solid 1px #9a7bf3;
}
#rcontent{
position:relative;
top:-830px;
left:700px;
}
#rcontent ul li{
float:left;
width:30px;
height:15px;
margin:15px 5px;
list-style-type:none;
}
#rcontent ul{
width:200px;
margin-left:24px;
margin-top:24px;
}
#rcontent p{
margin-left:24px;
margin-top:24px;
color:#3b9e7f;
}
#rcontent a:hover{
text-decoration:underline;
}
#rcontent_top{
width:260px;
height:150px;
border-bottom:solid 1px #9a7bf3;
}
#rcontent_bottom{
width:260px;
height:350px;
}
.mov_li{
list-style-type:none;
display: inline-block;
vertical-align: top;
float:left;
width:140px;
height:220px;
margin-left:24px;
margin-top:24px;
}
.mov img{
border:solid 1px #9a7bf3;
}
.mov_li a:hover{
text-decoration:underline;
}
.caption{
position:relative;
top:5px;
left:-20px;
}
.caption p{
text-align:center;
color:#3d7f9e;
}
#save{
position:relative;
top:0;
left:-23px;
}
.caption #like{
position:relative;
top:-22px;
left:53px;
margin-left:30px;
}
#like p{
height:25px;
background:url(images/like.png) no-repeat;
backgrpund-postion:0 0;	
background-size:25px 50px;
}
#like p:hover{
background-position:0 -25px;
}
#page{
position:relative;
top:-605px;
left:505px;
}
#page li{
float:left;
width:19px;
height:25px;
padding-left:5px;
list-style-type:none;
}
#page li a{
color:#2b2b2b;
}
#last li{
width:19px;
height:20px;
margin-top:5px;
background:url(images/last.png) no-repeat;
background-position:0 0;
background-size:20px 40px;
}
#last li:hover{
background-position:0 -20px;
}
#next li{
width:19px;
height:20px;
margin-top:5px;
background:url(images/next.png) no-repeat;
background-position:0 0;
background-size:20px 40px;
}
#next li:hover{
background-position:0 -20px;
}
#search{
position:relative;
top:30px;;
left:30px;
}
#search-img{
position:relative;
top:5px;
left:0;
}


#asearch
{
    
    
    
    width:340px;}
</style>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <div id="content">
    	<img src="images/movie_ban.png"></img>
		<div id="lcontent">
        	<div id="tabs">
				<ul>
					<li><a href="#tabs-1">正在热映</a></li>
					<li><a href="#tabs-2">即将上映</a></li>
					<li id="asearch"><asp:TextBox ID="searchtext" runat="server"></asp:TextBox>
                     <a href="#tabs-3">search </a> 
                        <asp:Button ID="Button1" runat="server" Text="搜索"  /></li>
				</ul>
                <div id="tabs-1">
                    <asp:Repeater ID="mo" runat="server">
                        <ItemTemplate>
                            <ul id="mov_ul">
                                <div class="mov_li">
                                    <div class="mov">
                                        <li><a href="">
                                            <img src='<%#Eval("image_url") %>' runat="server" id="cinema1" onclick="return cinema1_onclick()"></img></a></li>
                                    </div>
                                    <div class="caption">
                                        <a href="">
                                            <p class="caption" id="name1">
                                                电影名：<%# Eval("name")%></p>
                                        </a>
                                        <p class="cap">
                                            导演：<%# Eval("director")%></p>
                                        <a href="">
                                            <p class="cap" id="tel1">
                                                演员：<%# Eval("actors")%></a><p class="cap" id="save">
                                            收藏</p>
                                        <div id="like">
                                            <p>
                                                <a href=""></a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </ul>
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
                <div id="tabs-2">
                	<ul id="mov_ul">
                    	<div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov1.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov1</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov1.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov1</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov1.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov1</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov1.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov1</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov1.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov1</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov1.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov1</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov1.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov1</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov1.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov1</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
            		</ul>
                </div>
                <div id="tabs-3">
                	<ul id="mov_ul">
                    	<div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov3.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov3</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov3.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov3</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov3.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov3</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov3.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov3</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov3.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov3</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov3.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov3</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov3.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov3</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
                        <div class="mov_li">
                			<div  class="mov" >
            					<li><a href=""><img src="images/mov3.jpg"></img></a></li>
                    		</div>
                   			<div class="caption">
                				<a href=""><p>mov3</p></a>
                                <p id="save">收藏</p>
                                <div id="like">
                    				<p><a href=""></a></p>
                                </div>
                    		</div>
                		</div>
            		</ul>
                </div>
            </div>
		</div>
		<div id="rcontent">
        	
            <br/>
            <div id="rcontent_bottom">
            	
               
            </div>  	
        </div>
        <div id="page">
        	<ul>
            	<div id="last">
            		<li><a href=""></a></li>
                </div>
                <li><a href="">1<a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
                <li><a href="">5</a></li>
                <div id="next">
                	<li><a href=""></a></li>
                </div>
            </ul>
        </div>
	</div>


</asp:Content>

